<template>
  <view class="leave">
    <Navbar :title="t('leave.title')"></Navbar>
    <scroll-view :scroll-top="top" scroll-y class="content">
      <!-- 渲染 -->
      <view v-for="(item, index) in msgList" :key="index">
        <view v-if="item.is_manager == 1">
          <view class="left">
            <image
              class="img"
              src="/static/leave/kefu.jpg"
              mode="scaleToFill"
            />
            <view class="text" v-html="item.message"></view>
          </view>
          <text class="time">{{ item.created_at }}</text>
        </view>
        <view v-else>
          <view class="left" style="direction: rtl">
            <image
              class="img"
              src="/static/leave/my.jpg"
              mode="scaleToFill"
              style="margin: 0 30rpx 0 10rpx"
            />
            <view
              class="text"
              v-html="item.message"
              style="padding-right: 10rpx"
            ></view>
          </view>
          <text class="time">{{ item.created_at }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="bottom">
      <input type="text" class="input" v-model="msg" />
      <view style="display: flex">
        <view class="line"></view>
        <text @click="send">{{ t("leave.send") }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onUnmounted } from "vue";
import Navbar from "../../components/Navbar.vue";
import api from "../../networks/apis";
import { onLoad } from "@dcloudio/uni-app";
const top = ref();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
//消息
onLoad(() => {
  getMessage();
  top.value = 9999999999999;
});

const msgList = ref([]);
const intervalId = setInterval(() => {
  const getMessage = async () => {
    const res = await api.getMessageAPI();
    msgList.value = res.data;
  };
  getMessage(); //获取信息
}, 3000);

// 在组件卸载前清除定时器
onUnmounted(() => {
  clearInterval(intervalId);
});

const msg = ref("");
const sendMessge = async () => {
  const res = await api.message(msg.value);
  msg.value = null;
};
sendMessge(); //发送信息
const send = async () => {
  await sendMessge();
  getMessage();
};
watch(msgList, () => {
  scrollToBottom();
});
const scrollToBottom = () => {
  setTimeout(() => {
    top.value = top.value + 200;
  }, 50);
};
</script>

<style lang="scss" scoped>
.leave {
  width: 750rpx;
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;

  .left {
    display: flex;
    align-items: center;
    margin-top: 38rpx;

    .img {
      width: 106rpx;
      height: 106rpx;
      margin: 0 10rpx 0 30rpx;
    }

    .text {
      display: inline-block;
      white-space: pre-wrap;
      word-wrap: break-word;
      width: 512rpx;
      font-size: 28rpx;
      padding: 36rpx 0;
      font-family: Arial, Arial;
      font-weight: 400;
      color: #ffffff;
      background-image: url("/static/leave/Rectangle 71.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding-left: 10rpx;
    }
  }

  .time {
    display: block;
    text-align: center;
    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 20rpx;
    color: #ffffff;
  }
}

.bottom {
  width: 100%;
  height: 120rpx;
  background-image: url("/static/leave/Rectangle 76.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;

  .input {
    width: 600rpx;
    height: 46rpx;
    font-size: 28rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 38rpx;
  }

  .line {
    width: 2rpx;
    height: 38rpx;
    background-color: #ffffff;
    margin-right: 5rpx;
  }

  text {
    height: 46rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 38rpx;
  }
}
</style>
